<template>
  <div>
    <div>
      <div>
        <!-- 店铺名 -->
        <div class="box">
          <van-checkbox
            v-model="$store.state.dianpuchecked"
            checked-color="#de3745"
            icon-size="16px"
            @click="quanxuan"
            >欧莱雅官方旗舰店</van-checkbox
          >
          <!-- <input type="checkbox" :checked="item.storechecked" /> -->
        </div>
        <!-- 商品数据 -->
        <div v-for="(item, index) in cartshop" :key="index" class="shops">
          <div class="shopsLeft">
            <van-checkbox
              v-model="item.checked"
              checked-color="#de3745"
              icon-size="16px"
              @click="danxuan(index)"
            ></van-checkbox>
            <img :src="item.cShopImgSrc" alt="" />
          </div>
          <div class="shopsRight">
            <p>{{ item.title }}</p>
            <span class="text">{{ item.ctype }}</span>
            <div class="price">
              <span>￥{{ item.price }}</span>
              <p>
                <button @click="reduce(index)">-</button>
                <span>{{ item.num }}</span>
                <button @click="add(index)">+</button>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="foor">
        <div class="footer">
          <div class="footerLeft">
            <van-checkbox
              checked-color="#de3745"
              v-model="$store.state.dianpuchecked"
              icon-size="16px"
              @click="quanxuan"
            ></van-checkbox>
            <span>全选</span>
          </div>
          <div class="footerRight">
            <span>合计:</span>
            <span class="color">{{ showsunprice.toFixed(2) }}</span>
            <button @click="order()">去支付</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      // shoplist: "",
      // cartshop:this.$store.state.cartshop
      shangpin:[]
    };
  },
  computed: {
    ...mapState(["cartshop"]),
    ...mapState(["allchecked"]),
    ...mapGetters(["showNum"]),
    ...mapGetters(["showsunprice"]),
    ...mapState(["dianpuchecked"]),
  },
  mounted() {
    console.log(JSON.parse(localStorage.getItem("onshop")));
    let obj = JSON.parse(localStorage.getItem("onshop"));
    if(obj==null){
      return;
    }else{
      this.$store.commit("showshuju", obj);
    console.log(JSON.parse( localStorage.getItem('onshop'))[0].num);
    }
    
    
  },
  methods: {
    //去支付点击事件
    order() {
      
          let arr= this.$store.state.cartshop.filter((item,index)=>{
            if(item.checked==true){
              this.$store.state.cartshop[index].paystatus='代付款';
            }
            return item.checked==true
          })
          console.log(arr);
            if(arr.length==0){
              alert("请先选中商品");
                   return
            }else{
               this.$router.push('/order')
                  //  this.shangpin.push(this.$store.state.cartshop[i])
                    localStorage.setItem('shangpindata',JSON.stringify(arr) )
                    console.log(222);
            }
            this.$store.state.dianpuchecked=false
    },
    add(index) {
      this.$store.commit("add", index);
    },
    reduce(index) {
      if (this.$store.state.cartshop[index].num <= 1) {
        alert("不能减了哟");
        return;
      }
      this.$store.commit("reduce", index);
    },
    dianpuquanxuan(){
      console.log(222);
    },
    quanxuan() {
      this.$store.commit("quanxuan");
    },
    danxuan() {
      this.$store.commit("danxuan");
    },
    all() {
      this.$store.commit("all");
    },
  },
  components: {},
};
</script>

<style lang="less" scoped>
.box {
  overflow: hidden;
  .van-checkbox {
    height: 40px;
  }
}
.shops {
  overflow: hidden;
  padding: 35px 0;
  text-align: left;
  .shopsLeft {
    float: left;
    position: relative;
    margin-right: 10px;
    img {
      width: 180px;
      height: 190px;
      margin-left: 50px;
    }
    .van-checkbox {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      height: 40px;
    }
  }
  .shopsRight {
    p {
      font-size: 28px;
    }
    .text {
      background-color: #fceded;
      padding-top: 5px;
      margin-top: 10px;
      display: inline-block;
      margin-left: 50px;
      font-size: 20px;
    }
    .price {
      position: relative;
      bottom: -25px;
      // background-color: red;
      display: inline-block;
      width: 300px;
      span {
        color: rgba(255, 0, 0, 0.7);
      }
      p {
        position: absolute;
        top: 0;
        right: 0;

        button {
          width: 40px;
          border: none;
          background-color: #fff;
        }
      }
    }
  }
}
.foor {
  overflow: hidden;
  position: fixed;
  bottom: 110px;
  left: 0;
  width: 100vw;
}
.footer {
  width: 100%;
  background-color: #fff;
  display: flex;
  font-size: 30px;
  padding: 0 50px;
  .footerLeft {
    margin-left: 5px;
    flex: 1;
    text-align: left;
    .van-checkbox {
      margin-right: 15px;
      float: left;
      height: 40px;
    }
    span {
      float: left;
    }
  }
  .footerRight {
    .color {
      color: red;
    }
    button {
      border: none;
      border-radius: 50px;
      width: 120px;
      background-color: red;
      color: #fff;
    }
  }
}
</style>